<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM</title>
    <style>
        div[class='box-1'] ~ div[class='box-2']{
            background-color: red;
        }

        #div2{
            position: relative;
            top: 10px;
            left: 10px;
            width: 200px;
            height: 300px;
            background-color: yellow;
            overflow: scroll;
            /* overflow-x: scroll; */
            /* overflow: hidden; */
        }
        #box1{
            width: 400px;
            height: 600px;
            /* padding: 10px; */
            position: absolute;
            /* top: 20px;
            left: 20px; */
            /* border: 10px solid black; */
            background-color: #ccc;
        }
    </style>
</head>
<body  >

    <form action="" id="form">
        userName: <input name="username" value="test userName" />
        pwd: <input name="pwd" value="test pwd" />
    </form>

    <div id="div2" >
        <DIV id="box1"><!-- DOM 编程基础  -->
            <P>p1</P>
            <UL><li>1</li> 
                <li>2</li>
                <li id="li3">3</li>
                <li>4</li> 
                <li>5</li>
            </UL>
            <p>p2</p>
        </DIV>
    </div>

    <script>

        /*
            构造函数
            继承
            this, call, apply
        */

        // scrollWidth      滚动区域内容的宽度
        // scrollHeight     滚动区域内容的高度
        // scrollLeft       滚动条的位置
        // scrollTop        滚动条的位置

        // var box = document.getElementById('box1');
        // var box2 = document.getElementById('div2');
        // console.log(
        //     box2.scrollWidth,
        //     box2.scrollHeight,
        //     box2.scrollLeft
        // )
        
        // document.onclick = function() {
        //     console.log(
        //         box2.scrollLeft,
        //         box2.scrollTop
        //     )
        // }
        // console.log(
        //     // box
        //     // window.getComputedStyle(box).left

        //     box.offsetLeft,     // 内容到父级最左侧的宽度
        //     box.clientLeft,     // 边框的宽度
        //     box.clientTop
        // )

        // var form = document.getElementById('form');
        // console.log(
        //     form.username.value,
        //     form.pwd.value
        // )
        // form.username.select()
        // setTimeout(() => {
        //     console.log(
        //         form.username.selectionStart,
        //         form.username.selectionEnd
        //     )
        // }, 3e3)

        // markdown 编辑工具
        // DocumentFragment
        // let temp = document.createDocumentFragment()
        // let startTime = Date.now()
        // for (let i = 0; i < 1e5; i++) {
        //     let h1 = document.createElement('h1')
        //     h1.innerHTML = 'test'
        //     // temp.appendChild(h1);
        //     document.body.appendChild(h1);
        // }
        // // document.body.appendChild(temp);
        // console.log(Date.now() - startTime);

        // 用户选取内容
        // var getSelectionFn = function () {
        //     if (window.getSelection) {
        //         return window.getSelection().toString()
        //     } else if (document.selection) {
        //         return document.selection.createRange().text
        //     }
        // }

        // setTimeout(function() {
        //     var str = getSelectionFn();
        //     console.log(str);
        // }, 1e3)

        // dom 的方法
        // var box1 = document.getElementById('box1');
        // let ul = box1.getElementsByTagName('ul')[0]
        // var li3 = document.getElementById('li3')
        // console.log(li3);
        // let liTest = document.createElement('li');
        // liTest.innerHTML = '<li>test</li>'
        
        // ul.replaceChild(
        //     liTest,
        //     li3
        // );



        // let li = document.createElement('li')
        // li.innerHTML = '6'
        // ul.appendChild(li)
        // ul.insertBefore(
        //     li, ul.childNodes[0]
        // )

        // let h1 = document.createElement('h1')
        // h1.innerHTML = 'web前端初级班'
        // console.log(
        //     h1
        // )
        // document.body.appendChild(h1);
        // h1.className = 'test'
        // h1.dataset.test1 = 'test'
        
        // let h2 = h1.cloneNode()
        // document.body.appendChild(h2);

        // ---------------------------------------

        // img
        // let img = document.getElementById('img1');
        /*
            getAttribute,       获取某个属性
            hasAttribute,       有没有某个属性
            setAttribute,       设置某个属性
            removeAttribute,    删除某个属性
        */
        // document.body.innerHTML = `<h1>test</h1>`
        // console.log(
        //     document.body.innerHTML
        // )

        // id
        // var e = document.getElementById('box1')
        // console.log(e);

        // name
        // var eleList = document.getElementsByName('box')
        // console.log(eleList);

        // let divList = document.getElementsByTagName('div')
        // console.log(divList);

        // let divList = document.getElementsByClassName('box-1')
        // console.log(divList);
        
        // let divList = document.querySelectorAll("div[class=box-1], .box-2")
        // console.log(divList);

        // var box1 = document.getElementById('box1');
        // console.log(
        //     box1.childNodes[0].nodeValue
        // )
        /*
            9 Docuemnt
            1 element   节点
            3 text      节点
            8 comment
            11 DocumentFragment
        */
        // for (let node of document.body.childNodes) {
        //     if (node.nodeType === 8) {
        //         console.log(
        //             node.textContent
        //         )
        //     }
        //     console.log(
        //         node.nodeType
        //     )
        // }
        // firstChild, lastChild
        // var ul = box1.querySelector('ul')
        // console.log(
        //     ul.lastChild
        // )
        // var li = box1.querySelector('#li3')
        // console.log(
        //     // li.nodeName
        //     document.body.nodeName
        // )
        // console.log(
        //     li.previousElementSibling,
        //     li.previousSibling
        // )
        // console.log(
        //     li.nextSibling
        // )
        // console.log(
        //     li.nextElementSibling,
        //     li.nextSibling,
        // )
        
    </script>
</body>
</html>